import React, { Component } from 'react'
import PropTypes from 'prop-types'
// vue 可以在子组件中验证 属性的 数据类型以及设置默认值
// React 如何校验自定义属性的 数据类型
// 从react 15.5版本开始，抽离了 数据类型验证 prop-types

// 父组件在调用子组件的地方，添加自定义的属性
// 属性的值就是父组件需要传递给子组件的值
// 如果需要传递的值是 变量，boolean类型，number类型，数组，对象，以及null和undefined，
// 需要使用{} 包裹
// 安装  prop-types 第三方模块完成父子组件传值
// 可以通过 组件.proptyps = {} 形式验证数据类型
// key:value来验证
// key 为自定义的属性名
// value 为 PropTypes.数据类型
// 如果是必传的 PropTypes.数据类型.isRequired
// 如果属性可以选择多个不同的数据类型 PropTypes.oneOfTyoe([])
function Title (props) {
  return (
    <h1>
      { props.children }
    </h1>
  )
}
Title.propTypes = {
  name: PropTypes.string,
  flag: PropTypes.bool,
  // count: PropTypes.number  
  count: PropTypes.oneOfType([ // 要不是字符串，要不是 number
    PropTypes.string,
    PropTypes.number
  ])

}
class Content extends Component {
  render () {
    return (
      <div>
        { this.props.children }
      </div>
    )
  }
}
// 如果属性设置了数据类型的校验，但是还必须要求是必传项
// name: PropTypes.string.isRequired,
// count: PropTypes.oneOfType([ // 要不是字符串，要不是 number
//  PropTypes.string,
//  PropTypes.number
// ]).isRequired
Content.propTypes = {
  name: PropTypes.string.isRequired,
  num: PropTypes.number.isRequired,
  list: PropTypes.array.isRequired
}
export default class App extends Component {
  state = {
    count: 10
  }
  render() {
    return (
      <div>
        <Title name="标题" flag={ true } count = { this.state.count }>这是标题</Title>
        <Content name="内容" num = { 100 } list={ [1, 2, 3] }>这是内容</Content>
      </div>
    )
  }
}
